<template>
  <div ref="myref">
    <div v-for="l in ls" :key="l" :ref="setrefs">{{l}}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref,nextTick,toRef, toRefs } from "vue";
import { useRoute,useRouter } from "vue-router";
import { useStore } from 'vuex'
export default defineComponent({
  //onready 
  setup() {
    const msg = ref('hello ref')
    const myref = ref(null)
    const mrefs: any[] = []
    setTimeout(() => {
      msg.value = 'hello ref2'
      console.log(mrefs)
    }, 1000);
    
    return {
      msg,
      myref,
      setrefs(e){
        console.log(e)
        mrefs.push(e)
      },
      ls:['1','2']
    }
    // const a = {
    //   name:'xiong',
    //   age:18
    // }
    // const route = useRoute()
    // const router = useRouter()
    // const store = useStore()
    // console.log(store)
    // console.log(route)
    // console.log(router)
    // const nameref = toRef(a,'name')
    // const fas = toRefs(a)
    // const msg = ref("hello ref");
    // const divelement = ref(null)
    // const changeMsg = () => {
    //   msg.value = "this is change msg";
    // };
    // nextTick(()=>{
    //   console.log(divelement.value)
    // })
    // return {
    //   msg,
    //   changeMsg,
    //   divelement,
    //   nameref,
    //   ...fas
    // };
  },
  mounted() {
    this.msg = "33333";
  },
});
</script>
